<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
	<base href="<%=basePath%>">
	<!--引入jquery-->
	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<!--引入echarts插件-->
	<script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
	<title></title>

	<script type="text/javascript">
		$(function () {
			// 发送查询请求
			$.ajax({
				url:'workbench/chart/activity/queryCountOfActivityGroupByOwner.do',
				type:'post',
				dataType:'json',
				success:function (data) {
					// 调用echarts工具函数，显示漏斗图
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('a1'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '员工市场活动所有量',
						},
						legend: {
							top: 'bottom'
						},
						toolbox: {
							show: true,
							feature: {
								mark: { show: true },
								dataView: { show: true, readOnly: true },
								restore: { show: true },
								saveAsImage: { show: true }
							}
						},
						series: [
							{
								name: '市场活动所有者',
								type: 'pie',
								radius: [50, 140],
								center: ['50%', '50%'],
								roseType: 'area',
								itemStyle: {
									borderRadius: 8
								},
								data: data
							}
						]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			});

			$.ajax({
				url:'workbench/chart/transaction/queryCountOfTranGroupByStage.do',
				type:'post',
				dataType:'json',
				success:function (data) {
					// 调用echarts工具函数，显示漏斗图
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('t1'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '交易统计图表',
							subtext: '交易表中各个阶段的数量'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c}"
						},
						toolbox: {
							feature: {
								dataView: {readOnly: true},
								restore: {},
								saveAsImage: {}
							}
						},
						series: [
							{
								name: '数据量',
								type: 'funnel',
								left: '10%',
								width: '80%',
								label: {
									formatter: '{b}'
								},
								labelLine: {
									show: true
								},
								itemStyle: {
									opacity: 0.7
								},
								emphasis: {
									label: {
										position: 'inside',
										formatter: '{b}: {c}'
									}
								},
								data: data
							}
						]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			});
		});

		$.ajax({
			url:'workbench/chart/clue/queryCountOfClueGroupByStage.do',
			type:'post',
			dataType:'json',
			success:function (data) {
				// 调用echarts工具函数，显示漏斗图
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('c1'));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '线索柱状图'
					},
					xAxis: {
						type: 'category',
						data: data.clueStage
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							data: data.counts,
							type: 'bar',
							showBackground: true,
							backgroundStyle: {
								color: 'rgba(180, 180, 180, 0.2)'
							}
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		});

		$.ajax({
			url:'workbench/chart/customerAndContacts/queryCountOfCustomerAndContactsGroupByCustomer.do',
			type:'post',
			dataType:'json',
			success:function (data) {
				// 调用echarts工具函数，显示漏斗图
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('cc1'));

				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [
						{
							name: '客户数量',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2
							},
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '40',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: data
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		});
	</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="a1" style="width: 500px;height:400px; top: 20px;"></div>
<div id="t1" style="position: absolute;top: 10px; left:650px;width: 500px;height:450px;"></div>
<div id="c1" style="position: absolute;top: 490px;width: 500px;height:450px;"></div>
<div id="cc1" style="position: absolute;top: 460px; left:650px;width: 500px;height:600px;"></div>
</body>
</html>